<template>
  <!--测评2-->
  <div>
    <ceping >
      <ul class="step">
        <li class="active">
          <p>基本资料</p>
          <span></span>
        </li>
        <li class="active">
          <p>教育经历</p>
          <span></span>
        </li>
        <li>
          <p>工作经历</p>
          <span></span>
        </li>
        <li>
          <p>能力测评</p>
          <span></span>
        </li>
      </ul>
      <div class="ceping_form">
        <Form ref="ceping2form" :model="education" :label-width="102" :rules="educationRule">
          <FormItem label="学校名称" prop="schoolName">
            <Input  v-model="education.schoolName" placeholder="请输入学校名称" :maxlength="40"/>
          </FormItem>
          <div class="dateContent clearfix">
            <FormItem prop="studyStartTime" label="就读时间">
              <DatePicker class="dateRight"  :value="education.studyStartTime" @on-change="getStart" type="date" placeholder="选择日期" ></DatePicker>
            </FormItem>
            <FormItem prop="studyEndTime">
              <DatePicker class="dateRight" :value="education.studyEndTime" @on-change="getEnd" type="date" placeholder="选择日期" style="margin-left: 20px"></DatePicker>
            </FormItem>
          </div>
          <FormItem label="学历" prop="education">
            <Select  v-model="education.education" placeholder="请选择学历">
              <Option :value="edu.code" v-for="edu in educationList" :key="edu.code">{{edu.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="专业" prop="major">
            <Select  v-model="education.major" placeholder="请选择专业">
              <Option :value="pro.code" v-for="pro in professionList" :key="pro.code">{{pro.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="是否统招" prop="unified">
            <RadioGroup v-model="education.unified">
              <Radio :label=1 >是</Radio>
              <Radio :label=2 >否</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="证书编号" prop="certificateNo">
            <Input  v-model="education.certificateNo" placeholder="请输入证书编号" :maxlength="30"/>
          </FormItem>
          <FormItem class="divformitem"  prop="diploma" style="width: 500px">
            <div v-if="education.diploma !== '' && education.diploma !== undefined ">
              <img class="showimg" :src="education.diploma"/>
              <span class="upuser"><Upload ref="diplomaceping1" :show-upload-list="false" :format="['jpg','jpeg','png']" :headers="{Authorization:token}" action="/base/file/upload" :max-size="3072" :on-exceeded-size="handleMaxSize"  :on-success="diploma1Success" :on-format-error="formatError">重新上传</Upload></span>
            </div>
            <div v-else>
                <Upload ref="diplomaceping2"  :format="['jpg','jpeg','png']" :show-upload-list="false" :headers="{Authorization:token}" action="/base/file/upload" :max-size="3072" :on-exceeded-size="handleMaxSize"  :on-success="diploma2Success" :on-format-error="formatError">
                  <div class="upload">
                    <Icon type="ios-add" size="100" color="#dbdbdb"/>
                  </div>
                </Upload>
            </div>
            <div class="upload_tip">提示：上传图片最大尺寸800px，大小为3M以内</div>
          </FormItem>
          <FormItem label="职称" prop="academicTitle">
            <Input  v-model="education.academicTitle" :maxlength="12" placeholder="请输入职称"/>
          </FormItem>
          <FormItem label="级别" prop="grade">
            <Select  v-model="education.grade" placeholder="请选择级别">
              <Option :value="rank.code" :key="rank.code" v-for="rank in rankList">{{rank.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="职称证书"  prop="academicImg" style="width: 500px">
            <div v-if="education.academicImg !== ''&& education.academicImg !== undefined">
              <img class="showimg" :src="education.academicImg"/>
              <span class="upuser"> <Upload ref="academicImgceping1" :show-upload-list="false"  :format="['jpg','jpeg','png']" :headers="{Authorization:token}" action="/base/file/upload" :max-size="3072" :on-exceeded-size="handleMaxSize"  :on-success="academicImg1Success" :on-format-error="formatError">重新上传</Upload></span>
            </div>
            <div v-else>
                <Upload ref="academicImgceping2"  :format="['jpg','jpeg','png']" :show-upload-list="false" :headers="{Authorization:token}" action="/base/file/upload" :max-size="3072" :on-exceeded-size="handleMaxSize"  :on-success="academicImg2Success" :on-format-error="formatError">
                  <div class="upload">
                    <Icon type="ios-add" size="100" color="#dbdbdb"/>
                  </div>
                </Upload>
            </div>
            <div class="upload_tip">提示：上传图片最大尺寸800px，大小为3M以内</div>
          </FormItem>
          <FormItem>
            <Button class="nextbtn" @click="next('ceping2form')">下一步</Button>
          </FormItem>
        </Form>
        <Spin fix v-show="isSpinShow" >
          <div class="loader">
            <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
            <div class="font14">加载中...</div>
          </div>
        </Spin>
      </div>
    </ceping>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .banner{
    height: 360px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }


  .content .container .step li:nth-child(2) span:after{
    left: 30px;
  }
  form{
    width: 360px;
    margin:50px  0 0 50px ;
  }
  .upload_tip{
    text-align: left;
    color: #FF0000;
  }
  .ceping_form{
    .dateContent{
      width: 800px;
      .ivu-form-item{
        float: left;
      }
      .ivu-form-item:last-child{
        margin-left: -80px;
      }
    }
  }
  .upload{
    width: 200px;
    height: 144px;
    background-color: #f9f9f9;
    border:1px dashed #e1e1e1;
    text-align: center;
    line-height: 144px;
    cursor: pointer;
  }
  .nextbtn{
    background-color: #957960;
    height: 55px;
    width: 221px;
    font-size: 16px;
    color: #fff;
  }
  .step li:nth-child(1).active{
    span:after{
      background-color: #957960 !important;
    }
  }
  .showimg {
    display: inline-block;
    width: 258px;
    height: 200px;
    overflow: hidden;
    vertical-align: bottom;
  }
  .upuser {
    display: inline-block;
    font-size: 16px;
    color: #333;
    cursor: pointer;
  }

</style>
<script type="text/ecmascript-6">
  import ceping from '../template/ceping'
  import {educationList,updateEducation,centreInfoWeb,abilityPage} from '../../http'
  import {getStore} from "../../storage";
  export default {
    name: 'ceping2',
    props: {},
    data() {
      //自定义验证规则
      const studyStartTimeRule = (rule,value,callback) => {
        if (this.education.studyStartTime === '' || this.education.studyStartTime === undefined) {
          callback(new Error());
        }else{
          callback();
        }
      };
      const studyEndTimeRule = (rule,value,callback) => {
        if (this.education.studyEndTime === '' || this.education.studyEndTime === undefined) {
          callback(new Error());
        }else{
          callback();
        }
      };
      return {
        isSpinShow:false,
        token:getStore('token'),      //上传证书使用
        education:{                   //教育经历
          academicImg: '',            //职称证书
          academicTitle: '',          //职称
          certificateNo: '',          //证书编号
          diploma: '',                //毕业证书
          education: '',              //学历
          grade: '',                  //级别
          id: '',
          isEducation:2,              //是否认证
          major: '',                  //专业
          schoolName: '',             //学校姓名
          studyEndTime: '',           //就读结束时间
          studyStartTime: '',         //就读开始时间
          unified:2,                  //是否统招
        },
        educationList:'',             //学历列表
        professionList:'',            //专业列表
        rankList:'',                  //级别列表
        //教育经历表单认证规则
        educationRule: {
          schoolName: [
            {required: true, message: '请填写学校名称', trigger: 'blur'}
          ],
          studyStartTime:[
            { validator:studyStartTimeRule,message: '请选择就读开始时间', trigger: 'blur'}
          ],
          studyEndTime:[
            { validator:studyEndTimeRule, message: '请选择就读结束时间', trigger: 'blur'}
          ],
          education: [
            {required: true, message: '请选择学历', trigger: 'change'}
          ],
          major: [
            {required: true, message: '请选择专业', trigger: 'change'}
          ],
          unified: [
            {required: true, message: '请选择统招', trigger: 'change', type: 'number'}
          ],
          certificateNo: [
            {required: true, message: '请输入证书编号', trigger: 'blur'}
          ],
          diploma:[
            {required:true, message: '请上传证书', trigger: 'change'}
          ],
          /*academicImg:[
            {required:true, message: '请上传证书', trigger: 'change'}
          ],*/
          /*academicTitle: [
            {required: true, message: '请输入职称', trigger: 'blur'}
          ],*/
          /*grade: [
            {required: true, message: '请选择级别', trigger: 'change'}
          ],*/
        },
      };
    },
    methods: {
      //上传证件超出大小2M限制
      handleMaxSize (file) {
        this.$Notice.warning({
          title: '证件上传失败',
          desc: '您上传的图片超过3M，无法上传。'
        });
      },
      //证书上传格式错误
      formatError(){
        this.$Notice.warning({
          title:"证件上传失败",
          desc:"图片格式错误，请上传图片",
          duration: 3,
        });
      },
      //上传
      diploma1Success(response){
        if(response.code === 200){
          this.$set(this.education,'diploma',response.data.fileUrl);
        }else{
          this.$Notice.warning({
            title:'证件上传失败',
            desc:'上传不成功，请重新上传',
            duration: 3,
          });
        }
      },
      //上传
      diploma2Success(response){
        if(response.code === 200){
          this.$set(this.education,'diploma',response.data.fileUrl);
        }else{
          this.$Notice.warning({
            title:'证件上传失败',
            desc:'上传不成功，请重新上传',
            duration: 3,
          });
        }
      },
      //上传
      academicImg1Success(response){
        if(response.code === 200){
          this.$set(this.education,'academicImg',response.data.fileUrl);
        }else{
          this.$Notice.warning({
            title:'证件上传失败',
            desc:'上传不成功，请重新上传',
            duration: 3,
          });
        }
      },
      //上传
      academicImg2Success(response){
        if(response.code === 200) {
          this.$set(this.education,'academicImg',response.data.fileUrl);
        }else{
          this.$Notice.warning({
            title:'证件上传失败',
            desc:'上传不成功，请重新上传',
            duration: 3,
          });
        }
      },
      getStart(value){
        this.education.studyStartTime = value;
      },
      getEnd(value){
        this.education.studyEndTime = value;
      },
      next(name){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          this.$refs[name].validate((valid) => {
            if (valid) {
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //是否已有教育经历
                  if (this.education.id === undefined) {
                    updateEducation({
                      schoolName: this.education.schoolName,
                      education: this.education.education,
                      major: this.education.major,
                      studyStartTime: this.education.studyStartTime,
                      studyEndTime: this.education.studyEndTime,
                      unified: this.education.unified,
                      certificateNo: this.education.certificateNo,
                      academicTitle: this.education.academicTitle,
                      grade: this.education.grade,
                      diploma: this.education.diploma,
                      academicImg: this.education.academicImg
                    }).then(res => {
                      this.isSpinShow = false;
                      if (res.code === 200) {
                        this.$Notice.success({
                          title: "人才测评提醒",
                          desc: '教育经历修改成功!',
                          duration: 3,
                        });
                        this.$router.push({
                          name: 'ceping3'
                        })
                      }else {
                        this.$Notice.success({
                          title: "人才测评提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    updateEducation({
                      id: this.education.id,
                      schoolName: this.education.schoolName,
                      education: this.education.education,
                      major: this.education.major,
                      studyStartTime: this.education.studyStartTime,
                      studyEndTime: this.education.studyEndTime,
                      unified: this.education.unified,
                      certificateNo: this.education.certificateNo,
                      academicTitle: this.education.academicTitle,
                      grade: this.education.grade,
                      diploma: this.education.diploma,
                      academicImg: this.education.academicImg
                    }).then(res => {
                      this.isSpinShow = false;
                      if (res.code === 200) {
                        this.$Notice.success({
                          title: "人才测评提醒",
                          desc: '教育经历修改成功!',
                          duration: 3,
                        });
                        this.$router.push({
                          name: 'ceping3'
                        })
                      }else {
                        this.$Notice.warning({
                          title: "人才测评提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  }
                } else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: '登录提醒 ',
                    desc: '使用人才测评，需用户登录！ ',
                    duration: 3,
                  });
                  this.$router.push({name: 'ceping'});
                }
              })
            } else {
              this.isSpinShow = false;
              this.$Notice.warning({
                title: "人才测评提醒",
                desc: '请填写教育信息!',
                duration: 3,
              });
            }
          })
        }
      },
      getCeping2(){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          //用户是否登录
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              //教育经历
              abilityPage().then(res => {
                if (res.code === 200) {
                  if (res.data.isBuy === 1) {
                    educationList().then(res => {
                      this.isSpinShow = false;
                      //教育经历展示
                      this.education = res.data.education;
                      if(this.education.unified == '' || this.education.unified == null || this.education.unified == undefined){
                        this.education.unified = 2;
                      }
                      this.educationList = res.data.educationList;
                      this.professionList = res.data.professionList;
                      this.rankList = res.data.rankList;
                    }).catch();
                  } else {
                    this.isSpinShow = false;
                    this.$Notice.warning({
                      title: "人才测评提醒",
                      desc: "请先购买人才能力测评",
                      duration: 3,
                    });
                    this.$router.push({
                      name: 'ceping'
                    })
                  }
                }else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "人才测评提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            } else {
              this.isSpinShow = false;
              this.$Notice.warning({
                title: '登录提醒 ',
                desc: '使用人才测评，需用户登录！ ',
                duration: 3,
              });
              this.$router.push({name: 'ceping'});
            }
          }).catch()
        }
      }
    },
    created() {
      /*this.$router.push({
        name:'ceping'
      })*/
      this.getCeping2();
    },
    components: {
      ceping
    }
  }
</script>
